<script setup lang="ts">
import dayjs from 'dayjs'
import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'
import type { HotPatchRemoveTaskReport } from '@/api'

defineProps<{
  taskReport: HotPatchRemoveTaskReport[]
}>()

const { t } = useI18n()

const CveStatus = {
  succeed: t('vul.task.taskStatus.removeSucceed'),
  fail: t('vul.task.taskStatus.removeFailed'),
  unknown: t('vul.task.taskStatus.unknown'),
}

enum CveBadgeStatus {
  succeed = 'success',
  fail = 'error',
  unknown = 'default',
}

function logFormat(str: string) {
  if (str && str !== '')
    return str.replace(/\n/g, '<br>')
}
</script>

<template>
  <a-descriptions :column="{ sm: 1 }">
    <a-descriptions-item v-if="taskReport[0]" :label="$t('vul.task.taskType')">
      {{ taskReport[0].task_type }}
    </a-descriptions-item>
    <a-descriptions-item v-if="taskReport[0]" :label="$t('vul.task.lastExecute')">
      {{ dayjs(taskReport[0].latest_execute_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
    </a-descriptions-item>
  </a-descriptions>
  <p>{{ $t('vul.task.executeResult') }}</p>
  <a-collapse default-active-key="0">
    <a-collapse-panel
      v-for="(resultItem, index) in taskReport"
      :key="index"
      :header="`${t('vul.cves.hosts')}： ${resultItem.host_name}`"
    >
      <template #extra>
        <a-badge :status="CveBadgeStatus[resultItem.status]" />
      </template>
      <a-descriptions :column="{ sm: 1 }">
        <a-descriptions-item :label="$t('vul.task.hostIp')">
          {{ resultItem.host_ip }}
        </a-descriptions-item>
        <a-descriptions-item :label="$t('vul.task.status')">
          {{ CveStatus[resultItem.status] }}
        </a-descriptions-item>
      </a-descriptions>
      <span>{{ $t('vul.task.checkItem') }} </span>
      <span
        v-if="
          !resultItem.task_result.check_items || resultItem.task_result.check_items?.length === 0
        "
      >
        {{ t('common.none') }}
      </span>
      <a-descriptions>
        <a-descriptions-item
          v-for="item in resultItem.task_result.check_items"
          :key="item.item"
          :label="item.item"
        >
          <CheckCircleTwoTone v-if="item.result" class="icon" two-tone-color="#52c41a" />
          <CloseCircleTwoTone v-else class="icon" two-tone-color="#ff0000" />
        </a-descriptions-item>
      </a-descriptions>
      <h4 style="margin-top: 15px">
        {{ $t('vul.task.hotpatchRemoveResult') }}
      </h4>
      <a-collapse default-active-key="0">
        <a-collapse-panel
          v-for="(cve, cveIndex) in resultItem.task_result.cves"
          :key="cveIndex"
          :header="`CVE: ${cve.cve_id}`"
        >
          <template #extra>
            <a-badge :status="CveBadgeStatus[cve.result]" />
          </template>
          <p>{{ $t('common.result', [CveStatus[cve.result]]) }}</p>
          <h4>Log:</h4>
          <div class="log-container" v-html="logFormat(cve.log)" />
        </a-collapse-panel>
      </a-collapse>
    </a-collapse-panel>
  </a-collapse>
</template>

<style scoped>
.log-container {
  border: 1px solid #eee;
  padding: 10px 5px;
}
</style>
